<template>
  <section class="power">
  <el-table :data="departmentList" border style="width: 100%" :row-style="showTr" @select="select()">
    <el-table-column label="序列号" type="index" width="80"></el-table-column>
    <el-table-column v-for="(msg, index) in newMsg" :key="msg.dataCom" :label="msg.text" :default-expand-all="false">
      <template scope="scope">
       <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
        <span class="button is-outlined is-primary is-small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
          <i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true" type="small"></i>
          <i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true" type="small"></i>
        </span>
        <i v-show="data.length" class="el-icon-caret-right" @click="expandDepartmentList(data,scope.$index)"></i><a @click="detail(scope.$index,data)" href="javascript:;" class="item_a">{{scope.row[msg.dataCom]}}</a>
      </template>
    </el-table-column>

    <el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" :default-expand-all="false">
      <template scope="scope">
        {{scope.row[column.dataIndex]}}
      </template>
    </el-table-column>
    <el-table-column label="操作"  >
      <template scope="scope">
        <el-button type="button" class="el-button el-button--default el-button--small" @click="editDepartment(scope.row)">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="small" @click="delectPowerModule(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <!--详情dialog框-->
     <el-dialog  @close="()=>{this.dialogComData = false}" title="公司详情" :visible.sync="dialogComData">
       <div :model="comDataDetail" class="dialog-company-detail">
       <el-row>
         <el-col :span="6" class="dialog-comData-name">部门名称：</el-col>
         <el-col :span="18" >{{comDataDetail.company}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="6" class="dialog-comData-name">描述：</el-col>
         <el-col :span="18" >{{comDataDetail.description}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="6" class="dialog-comData-name">是否启用：</el-col>
         <el-col :span="18" >{{comDataDetail.Enable}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="6" class="dialog-comData-name">所属业务模块：</el-col>
         <el-col :span="18" >4</el-col>
       </el-row>
       </div>
    </el-dialog>
    <!--编辑dialog框-->
    <el-dialog @close="handleDialogClose" title="编辑" :visible.sync="editVisible" class="module-dialog" >
      <div class="module-opera" >
        <el-form :model="searchForm" :rules="rules" ref="user-filter" label-width="120px">
          <el-form-item prop="editCompany" label="部门名称：">
            <el-input v-model.trim="editAdd.editCompany" ></el-input>
          </el-form-item>
          <el-form-item label="上级ID">
            <el-cascader :options="options" filterable :value="editAdd.mulSelect"></el-cascader>
          </el-form-item>
          <el-form-item prop="editDes" label="描述信息：">
            <el-input v-model.trim="editAdd.editDes"></el-input>
          </el-form-item>
          <el-form-item  label="是否启用">
            <el-checkbox v-model="checked">启用</el-checkbox>
          </el-form-item>
          <!--<el-form-item label="所属业务模块" prop="department">
            <el-select v-model="positionForm.department" placeholder="请选择部门">
              <el-option v-for="item in departmentList" :label="item.name" :value="item.id+''"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>-->
            <el-button @click="SubmitAddMoudle()" type="primary" icon="el-icon-upload2">保存</el-button>
            <el-button @click="importVisible = false" type="warning" icon="el-icon-close">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </section>
</template>
<script>
    import Vue from 'vue'
    import Utils from '../utils/index.js'
    import { mapGetters,mapMutations,mapActions } from 'vuex'
    import { Row,Col,Button,ButtonGroup,Input,Select,Option,FormItem,Form,Table,TableColumn,Pagination,MessageBox,Message,Icon,Dialog } from 'element-ui'
    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Button)
    Vue.use(ButtonGroup)
    Vue.use(Input)
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Pagination)
    Vue.use(Icon)
    Vue.use(Dialog)
    export default {
        name: 'tree-grid',
        props: {
// 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
            treeStructure: {
                type: Boolean,
                default: function () {
                    return false
                }
            },
// 这是相应的字段展示
            columns: {
                type: Array,
                default: function () {
                    return []
                }
            },
            newMsg: {
                type: Array,
                default: function () {
                    return []
                }
            },
// 这是数据源
            departmentList: {
                type: Array,
                default: function () {
                    return []
                }
            },
// 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
            requestUrl: {
                type: String,
                default: function () {
                    return ''
                }
            },
// 这个是是否展示操作列
            treeType: {
                type: String,
                default: function () {
                    return 'normal'
                }
            },
// 是否默认展开所有树
            defaultExpandAll: {
                type: Boolean,
                default: function () {
                    return false
                }
            }
        },
        data () {
            return {
                departmentData: '',
                selectIndex: [],
                comDataDetail: {},
                dialogComData: false,
                dialogPosition: false,
                newdepartmentData:[],
                editAdd:{
                    editCompany:'',
                    editDes:'',
                    mulSelect:[],
                    selectNum:'',
                    Enable:"",
                },
                options: [ {
                    value: '龙席',
                    label: '龙席电商',
                    children: [{
                        value: 'Ju53',
                        label: 'Ju53'
                    },{
                        value: '维权业务',
                        label: '维权业务',
                        children: [{
                            value: '直销北部',
                            label: '直销北部'
                        },{
                            value: '直销南部',
                            label: '直销南部'
                        }]
                    }]
                },{
                    value: 'Alibaba',
                    label: '阿里巴巴',
                    children: [{
                        value: '蚂蚁金服',
                        label: '蚂蚁金服'
                    },{
                        value: '支付宝',
                        label: '支付宝'
                    }]
                }],
                optionDate:[
                    {
                        value: '全球通业务部',
                        label: '全球通业务部'
                    }, {
                        value: '维权事业部',
                        label: '维权事业部'
                    }
                ],
                searchForm:{
                    name: "",
                    department: "",
                    role: "",
                    type: "",
                    status: ""
                },
                positionForm:{
                    department: '',
                    role:''
                },
                rules:{
                    editCompany: [
                        { required: true, message: '请输入部门名称', trigger: 'blur' }
                    ],
                    editDes: [
                        { required: false, message: '请输入描述信息', trigger: 'blur' }
                    ]
                },
                dialogVisible: false,
                editVisible:false,
                checked: true,
                valueOption: '',
            }

        },
        computed: {
            // 格式化数据源
            data: function () {
                let me = this
                if (me.treeStructure) {
                    let data = Utils.MSDataTransfer.treeToArray(me.departmentList, null, null, me.defaultExpandAll)
                    return data
                }
                return me.departmentList
            },
            ...mapGetters({
                departmentList: "getDepartmentList",
            })
        },
        methods: {
            // 显示行
            showTr: function (row, index) {
                let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
                row._show = show
                return show ? '' : 'display:none;'
            },
            // 展开下级
            toggle: function (trIndex) {
                let me = this
                let record = me.data[trIndex]
                record._expanded = !record._expanded
            },
            // 显示层级关系的空格和图标
            spaceIconShow (index) {
                let me = this
                if (me.treeStructure && index === 0) {
                    return true
                }
                return false
            },
            // 点击展开和关闭的时候，图标的切换
            toggleIconShow (index, record) {
                let me = this
                if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
                    return true
                }
                return false
            },
            detail(index,data) {
                this.comDataDetail =data[index];
                this.dialogComData = true;
            },
            handleDialogClose(){
                this.moduleAdd = { moduleValue:'', moduleInfo:''}
                this.editVisible = false
            },
            editDepartment(row){
                this.editAdd.editCompany = row.company;
                this.editAdd.editDes = row.des;
                this.editAdd.mulSelect = [{
                    value: '龙席',
                    label: '龙席电商',
                    children: [{
                        value: 'Ju53',
                        label: 'Ju53'
                    },{
                        value: '维权业务',
                        label: '维权业务',
                        children: [{
                            value: '直销北部',
                            label: '直销北部'
                        }]
                    }]
                }];
                this.editAdd.selectNum = row.des;
                this.editVisible = true;
            },
            SubmitAddMoudle(){
                this.$refs['moduleAdd'] && this.$refs['moduleAdd'].validate((valid) => {
                    if (valid) {
                        /*this.$store.dispatch('savePowerModule',{
                            moduleName : this.moduleAdd.moduleValue,
                            moduleDec : this.moduleAdd.moduleInfo,
                        }).then(()=>{
                            this.importVisible = false;
                        });*/
                    } else {
                        return false;
                    }
                })
            },
            select(departmentList){
            },
            ...mapActions([
                'fetchDepartmentList'
            ]),
            expandDepartmentList(data,index){
              this.newdepartmentData.push(data)
               this.getJson(this.departmentList,index);

            },
            getJson(data,index){
                this.fetchDepartmentList({parentId:data[index].id})

            }
        },
        watch: {
            departmentDatas() {},
            departmentList(curValue,oldValue){
                curValue = oldValue;
            }
        },
        created(){
            const _this = this
            this.fetchDepartmentList({parentId:0})
        }
    }
</script>
<style scoped lang="scss">
  .ms-tree-space{position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;}
  .ms-tree-space::before{content: ""}
  table td{
    line-height: 26px;
  }
  .power a.item_a {
    color: #20a0ff;
    text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
  }
  .dialog-company-detail{
    border-top:1px solid #dfe6ec;
    border-left:1px solid #dfe6ec;
    background-color: #f1f2f2;
  .el-row{
    border-bottom:1px solid #dfe6ec;
    border-right:1px solid #dfe6ec;
    line-height: 24px;
  }
  .el-col{
    min-height: 24px;
    padding: 0 8px;
  }
  .dialog-comData-name{
    padding-right: 4px;
    text-align: right;

  & + div{
        border-left:1px solid #dfe6ec;
        background-color: #fff;
        text-indent:10px;
      }
  }
  }

</style>